<template>
	<view>
		<view>
			<u-table>
				<u-tr class="u-tr" v-for="(v,k) in ballList" :key="k">
					<u-td class="u-td">
						<view>
							<text v-for="(v1,k1) in getRedBall(v.red)" class="red-ball">{{v1}}</text>
							<text class="blue-ball">{{v.blue>9?v.blue:'0'+v.blue}}</text>
						</view>
					</u-td>
				</u-tr>
			</u-table>
			<view class="btn-view">
				<u-button type="success" size="medium" class="btn" @click="reRandom">重新生成</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ballList: [{
					"red": [
						4,
						7,
						9,
						12,
						17,
						24,
						29
					],
					"blue": 14
				}, ]
			}
		},
		methods: {
			//获取红球数组
			getRedBall(ball) {
				let redBallListTemp = []
				for (var i = 0; i < ball.length; i++) {
					let temp = parseInt(ball[i])
					if (temp > 9) {
						redBallListTemp.push('' + temp)
					} else {
						redBallListTemp.push('0' + temp)
					}
				}
				return redBallListTemp;
			},
			reRandom() {
				uni.request({
					url: 'http://127.0.0.1:8000/ssq/api/v1/next/random', //仅为示例，并非真实接口地址。
					data: {
						num: 11
					},
					header: {},
					success: (res) => {
						this.ballList = res.data
					}
				});
			}
		},
		onLoad() {
			//初始化历史中奖数据
			uni.request({
				url: 'http://127.0.0.1:8000/ssq/api/v1/next/random', //仅为示例，并非真实接口地址。
				data: {
					num: 11
				},
				header: {},
				success: (res) => {
					this.ballList = res.data
				}
			});
		}
	}
</script>
<style>
	.blue-ball,
	.red-ball {
		display: inline-block;
		margin: 5rpx;
		padding: 6rpx;
		font-size: 36rpx;
		border-radius: 50%;
		color: white;
	}

	.blue-ball {
		background-color: blue;
	}

	.red-ball {
		background-color: red;
	}

	.btn-view {
		text-align: center;
		padding: 20rpx;
	}
</style>
